<template>
    <div class="pt44">
        <div class="weui-cells_t0 weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">账户安全</label>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">手机号码</label>
                </div>
                <div class="weui-cell__bd">
                    <span>{{this.$store.state.contactPhone}}</span>
                </div>
                <div class="weui-cell__ft">
                    <router-link to="/changePhone" class="weui-btn weui-btn_plain-primary operable ui-link">修改</router-link>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="" class="weui-label">登录密码</label>
                </div>
                <div class="weui-cell__bd">
                    <span></span>
                </div>
                <div class="weui-cell__ft">
                    <router-link to="/changePassword" class="weui-btn weui-btn_plain-primary operable ui-link">修改</router-link>
                </div>
            </div>
        </div>
        <div class="weui-cells weui-cell_form">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">营业员管理</label>
                </div>
            </div>
            <div v-for="(item, index) in this.$store.state.staffs" class="weui-cell staff_box">
                <div class="weui-cell__hd">
                    <span>{{ index+1 }}</span><span>{{ item.name  }}</span>
                </div>
                <div class="weui-cell__bd">
                    <span>{{ item.mobile }}</span>
                </div>
                <div class="weui-cell__ft">
                    <a @click="showDeletStaffDialog(item)" href="javascript:;" class="weui-btn weui-btn_plain-primary operable ui-link">删除</a>
                </div>
            </div>
            <div id="staffAddBox" class="weui-cell">
                <div class="weui-cell__bd">
                    <a @click="showAddStaffDialog" href="javascript:;" class="weui-btn weui-btn_default ui-link"><i class="fa fa-plus-circle" aria-hidden="true"></i>添加</a>
                </div>
            </div>
        </div>
        <add-staff></add-staff>
        <div v-show="showDeletStaff" class="js_dialog" id="delete-dialog">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <!-- <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div> -->
                <div class="weui-dialog__bd">是否删除该营业员(<span id="delete-staff">{{ deletStaff.name }}</span>)</div>
                <div class="weui-dialog__ft">
                    <a @click="closeDelectSatffDialog" href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default ui-link">否</a>
                    <a @click="deletStaffFunc" href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary ui-link">是</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import addStaff from '../components/addStaff.vue';

export default  {
    name: 'UserSetting',  // 组件名称
    components:{
        'add-staff':addStaff,
    },
    data () {  // 数据
        return {
          msg: 'UserSetting',
          deletStaff:{},
          showDeletStaff:false,
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        getStaffs(){ // 取营业员列表
        var parameter = {
            token:this.$store.state.token,
            loginName:this.$store.state.loginName,
            bizLicNo:this.$store.state.loginName,
            openid:this.$store.state.openid,
            loginType:1
        };
        var _this = this;
        $.post(queryStaff_URL,parameter,function(staffsData){
            console.dir(staffsData);
            if(staffsData.cashier_response && staffsData.cashier_response.cashier_info){
                var infos = staffsData.cashier_response.cashier_info;
                if (!infos.length) { // 返回一个营业员时不是数组处理
                    var ninfos = [];
                    ninfos.push(infos);
                    infos = ninfos;
                }
                _this.$store.state.staffs = infos;
                }
            });

        },
        showAddStaffDialog(){
            this.$store.state.isShowAddStaff = true;
        },
        showDeletStaffDialog(item){
            this.deletStaff = item;
            this.showDeletStaff = true;
        },
        closeDelectSatffDialog(){
            this.showDeletStaff = false;
        },
        deletStaffFunc(){
            // 调删除营业员接口
            this.$store.state.showLoading = true;
            var _this = this;
            var dstaffParameters = {
                token:this.$store.state.token,
                loginName:this.$store.state.loginName,
                openid:this.$store.state.openid,
                loginType:"1",
                cashno:this.deletStaff.cashno,
                mobile:this.deletStaff.mobile
            }
            $.post(deletedStaff_URL,dstaffParameters,function(dsdata){
                console.dir(dsdata);
                _this.$store.state.showLoading = false;
                _this.closeDelectSatffDialog();
                if(dsdata.cashier_response && dsdata.cashier_response.resp_msg){
                    _this.$store.state.errorMsg = dsdata.cashier_response.resp_msg
                }
                _this.getStaffs();
            });
            this.showDeletStaff = false;
        }

    },
    beforeMount(){
        this.getStaffs();
    }

}
</script>

<style lang='scss' scoped>
.weui-cells_t0 {
    margin-top: 0;
}
.staff_box .weui-cell__hd span {
    margin-right: 10px;
}
.weui-btn_default {
    color: #2792e4;
}
[class^="fa-"], [class*=" fa-"] {
    font-family: 'lyicon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-plus-circle {
    margin-right: 10px;
    vertical-align: text-bottom;
    &:before {
        content: "\eaf0";
    }
}


</style>
